<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft" id="navBarS">
        </van-nav-bar>

        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
            <view class="scroll_wrapper">
                <view class="moneyBg">
                    <view class="text">{{ navBarTitle }}</view>
                </view>

                <view class="orderList" @click="toOrderDetail(item, item.orderNum, item.orderStatus)">
                    <view class="goodsDetail">
                        <view class="wraper_left">
                            <view class="goodsPic">
                                <img class="img" :src="serviceProducts.image" mode="widthFix" />
                            </view>
                            <view class="goodsText">
                                <view class="goodsTop">
                                    <view class="goods_T">{{ serviceProducts.newName?serviceProducts.newName:serviceProducts.storeName }} <span
                                            v-if="serviceProducts.allTimes && serviceProducts.allTimes !==1">
                                            ({{serviceProducts.currentTimes}}/{{serviceProducts.allTimes}})</span>
                                    </view>
                                </view>
                                <view class="goodsMiddle"> 订单编号:<span>{{ serviceProducts.reservationId }} </span></view>
                                <view class="goodsBottom">有效期至: <span>{{ serviceProducts.endDate }}</span> </view>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 彩色的线 -->
                <view class="clearfix">
                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/colorLine.png"
                        alt="" style=" display:block; width: 100%; height:3px;" />
                </view>
                <template v-if="addressDataList.length > 0">
                    <view class="userInfo"  @click="changeAddress(0)">
                        <view class="userInfo_left" v-if="addressDataList.length > 0"  >
                            <view class="user_address">
                                <view class="user_address_text">{{ addressName }}</view>
                            </view>
                            <view class="userInfo_bottom">
                                <text class="userName" style="margin-right: 10px;">{{ addressInfo.realName }}</text>
                                <text class="userTel">{{ addressInfo.phone }}</text>
                            </view>
                        </view>
                        <view class="userInfo_right "> <van-icon name="arrow" size="11" @click="changeAddress(0)" />
                        </view>
                    </view>
                    <!-- 彩色的线 -->
                    <!-- <view class="clearfix">
                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/colorLine.png"
                            alt="" style=" display:block; width: 100%; height:3px;" />
                    </view> -->
                    <!-- 选择预约时间 -->
                    <view class="preBookedDate">
                        <view class="preBookedDateTitle">选择预约日期</view>
                        <view class="preBookedDateContent time-carousel-container">
                            <scroll-view class="scroll-view" scroll-x="true" :scroll-into-view="tabsCurrent"
                                :scroll-with-animation="true" show-scrollbar="false">
                                <view class="date-card" v-for="(time, index) in dateList" :key="index"
                                    @click="['not', 'busy'].includes(time.canReserve) ? null : selectDate(index, time)"
                                    :class="{ active: swiperDateCurrent === index,disabled: ['not', 'busy'].includes(time.canReserve) }">
                                    <view class="date">{{ time.showDate }}</view>
                                    <view class="week">{{ time.week }}</view>
                                    <view class="reservation" :class="time.canReserve === 'not' ? 'not' : ''">{{
                                        time.reservation }}</view>
                                </view>
                            </scroll-view>
                        </view>
                    </view>
                    <!-- <view class="preBookedTime" v-if="selectedDate">
                        <view class="preBookedTimeTitle">选择具体服务时间</view>
                        <view class="preBookedTimeContent">
                            <view class="time-range">
                                <view class="time-range-item" :class="{ active: currentTimeRange === '08:00~11:59' }"
                                    @click="changeTimeRange('08:00~11:59')">
                                    08:00～11:59
                                </view>
                                <view class="time-range-line" style="margin-left: 22rpx;margin-right: 22rpx;">|</view>
                                <view class="time-range-item" :class="{ active: currentTimeRange === '12:00~17:59' }"
                                    @click="changeTimeRange('12:00~17:59')">
                                    12:00～17:59
                                </view>
                                <view class="time-range-line" style="margin-left: 22rpx;margin-right: 22rpx;">|</view>
                                <view class="time-range-item" :class="{ active: currentTimeRange === '18:00~22:00' }"
                                    @click="changeTimeRange('18:00~22:00')">
                                    18:00～22:00
                                </view>
                            </view>
                            <view class="time-list">
                                <view class="time-card" :class="{ 'active': selectedTime === time }"
                                    v-for="time in getTimeList(currentTimeRange)" :key="time"
                                    @click="toselectTime(time)">
                                    {{ time }}
                                </view>
                            </view>
                        </view>
                    </view> -->
                    <view class="preBookedTime" v-if="selectedDate">
                        <view class="preBookedTimeTitle">选择具体服务时间</view>
                        <view class="preBookedTimeContent">
                            <view class="time-range">
                                <view v-for="(rangeObj, index) in timeRangeList" :key="index" style="display: flex; align-items: center;">
                                    <view class="time-range-item"
                                        :class="{ active: currentTimeRange === `${rangeObj.start}~${rangeObj.end}` }"
                                        @click="changeTimeRange(`${rangeObj.start}~${rangeObj.end}`)">
                                        {{ rangeObj.start }}～{{ rangeObj.end }}
                                    </view>
                                    <view class="time-range-line" v-if="index < timeRangeList.length - 1"
                                        style="margin-left: 20rpx; margin-right: 20rpx;">
                                        |
                                    </view>
                                </view>
                            </view>

                            <view class="time-list">
                                <view class="time-card" :class="{
                                    'active': selectedTime === time.orderTime,
                                    'disabled': !time.canReserve
                                }" v-for="time in timeSlots" :key="time.orderTime"
                                    @click="time.canReserve ? toselectTime(time.orderTime) : Toast('当前时间不可预约')">
                                    {{ time.orderTime.slice(0, 5) }}
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- 服务人员选择 -->
                    <view class="serviceStaff" v-if="selectedDate && selectedTime">
                        <view class="serviceStaffInfoTitle">选择服务人员 <span>（如不选择系统默认推荐）</span></view>
                        <view class="service-personnel">
                            <van-radio-group :value="selectedStaffId" @change.stop="onChangeServiceStaff">
                                <view class="personnel-item" v-for="(person, index) in servicePersons" :key="index" :id="person.id" >
                                    <view class="personnel-item-left" @tap.stop="toStaffInfo(person.id, index)">
                                        <view style=" height: 100%;"><img :src="person.avatarUrl ? person.avatarUrl:defaultAvatar" /></view>
                                        <view class="person-info">
                                            <view class="person-desc">
                                                <view class="name">{{ person.name }}</view>
                                                <view class="experience" v-if="person.experience">{{ person.workYear}}年工作经验</view>
                                            </view>
                                            <view class="tags">
                                                <view class="tag" v-for="(tag,index) in person.labels" :key="index">{{ tag.name }}</view>
                                            </view>
                                        </view>
                                    </view>
                                    <van-radio :name="person.id" checked-color="#ff6203"></van-radio>
                                </view>
                            </van-radio-group>
                        </view>
                    </view>

                    <!-- 选择具体服务时间 -->
                    <!-- <view class="preBookedTime">
                        <view class="preBookedTimeTitle">选择具体服务时间</view>
                        <view class="preBookedTimeContent">
                            <view class="time-card " v-for="(time, index) in timeArray" :key="index"
                                @click="selectTime(index)" :class="{ active: isTimeSelected(index) }">
                                {{ time }}
                            </view>
                        </view>
                        <input v-model.number="timeRange" type="number" placeholder="输入连续时长（小时）" />
                    </view> -->
                    <!-- 服务人员 Service Staff-->
                    <!-- <view class="serviceStaff">
                        <view class="serviceStaffInfoTitle">选择服务人员 <span>（如不选择系统默认推荐）</span></view>
                        <view class="serviceStaffInfoContent">
                            <scroll-view class="scroll-view-staff" scroll-x="true" show-scrollbar="false"
                                :scroll-into-view="staffCurrent" :scroll-with-animation="true">
                                <view class="serviceStaffItem" v-for="(itemH, indexH) in staffList"
                                    :id="'tabNum' + (indexH + 1)" :key="indexH" @click="toSelectStaff(itemH.id, indexH)"
                                    :class="{ active: swiperStaffCurrent === indexH }">
                                    <view class="staffImg" @tap.stop="toStaffInfo(itemH.id, indexH)"> <img
                                            :src="itemH.imgurl" alt="" mode="widthFix"> </view>
                                    <view class="staffName">{{ itemH.staffName }}</view>
                                    <view class="staffInfo">{{ itemH.staffInfo }}</view>
                                </view>
                            </scroll-view>
                        </view>
                    </view> -->
                </template>
                <template v-else>
                    <view class="emptyAddress">
                        <view class="userInfo_title">
                            <text @click="toastMsg">选择服务地址</text>
                        </view>
                        <view class="userAddressEmpty">
                            <van-empty class="custom-image"
                                image="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/addressEmpty.png" />
                            <view class="description">
                                <span>您还没有收货地址哦！</span>
                                <span style="color: #FF6203;" @tap="toAddAddress">去添加！</span>
                            </view>
                        </view>
                    </view>
                </template>

            </view>
        </scroll-view>
        <!-- <view class="goodsAction nav_box" v-if="addressDataList.length > 0">
            <van-goods-action class="my-goods-action" id="my-goods-action">
                <van-goods-action-button class="my-action-buttonL" color="#FF6203" text="提交预约"
                    @click="submitPreBooked" />
            </van-goods-action>
        </view> -->
        <view class="bottom" v-if="addressDataList.length > 0">
            <van-button type="primary" class="" @click="submitPreBooked"  :disabled="addressDataList.length == 0 ? true : false"
                :class="{ 'disabled-btn': addressDataList.length == 0 }">提交预约</van-button>
        </view>
        <van-toast id="van-toast" />
        <myHouse :show="myHouse" :house="house" @closeHouse="closeMyHouse" :pageBiaoshi="pageSign"
            :ebUserAddressList="addressDataList" :wxUserBaseInfo="wxUserBaseInfo" :addressInfo="addressInfo"></myHouse>
        <preBookedPopup :show="preBookedShow" @closePreBookedInfoPopup="closePreBookedPopup" :reservationInfo="reservationInfo" :hasStaff="hasStaff" ></preBookedPopup>
        <preBookedTips :show="showTips" @closeBookedTipsPopup="closePreBookedPopup"></preBookedTips>

    </view>
</template>

<script>
import myHouse from '@/mycomponents/myHouse.vue'
import preBookedPopup from '@/mycomponents/myService/preBookedPopup.vue'
import preBookedTips from '@/mycomponents/myService/preBookedTips.vue'
import Toast from '@/wxcomponents/vant/toast/toast'
import {reservationInfoApi,queryDateListApi,queryTimeListApi,queryEmpListApi} from '@/api/service'
import {getUserAddressApi} from '@/api/mine'

export default {
  components: {
      myHouse,
      preBookedPopup,
      preBookedTips
  },
  data() {
      return {
          defaultAvatar:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/defaultAvatar.png',
          navBarTitle: '待使用',
          scrolling:false,
          myHouse:false,
          swiperDateCurrent: -1, // 页面顶部tabs
          tabsCurrent:'tabNum1',

          swiperStaffCurrent: -1, // 页面顶部tabs
          staffCurrent:'tabNum1',// 服务人员选择
          serviceProducts: {
              reservationId:'343434343313131',
              orderStatus:'待收货',
              goodsId:11,
              image: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
              title:'黄芪杞姜枣糕红枣',
              price:'96',
              num:'1',
              jifen:190,
              money:'156',
              specs:'口味一：五斤装',
              logistics:''
          },
          active:3,
          activeTime:-1,  //选择具体时间
          selectedTimeIndexes:[], //存储选中的时间索引
          timeRange: 3, // 默认连续时长为 3 小时
          steps: [
              {
                  text: '已预约',
                  inactiveIcon: 'location-o',
                  activeIcon: 'success'
              },
              {
                  text: '已派单',
                  inactiveIcon: 'like-o',
                  activeIcon: 'plus'
              },
              {
                  text: '已服务',
                  inactiveIcon: 'star-o',
                  activeIcon: 'cross'
              },
              {
                  text: '待评价',
                  inactiveIcon: 'phone-o',
                  activeIcon: 'fail'
              }
          ],
          labelList:['金牌保姆','会开车','育儿经验'],
          params:undefined, //接受从路由传过来的参数
          addressName: '金鑫·滨湖一号3号楼1单元201',
          addressInfo:{},
          wxUserBaseInfo:{},
          userName: '王彤美',
          userTel: '15236236547',
          pageSign:'preBookedService',
          addressDataList: [
            //   {
            //       id: 1,
            //       name: '王彤美',
            //       phone: '15236236547',
            //       address: '金鑫·滨湖一号3号楼1单元201',
            //       isDefault: 1
            //   }
          ],
          dateList: [
            // {
            // date: '2025-01-10',
            // // week: '星期四',
            // reservation: 'false'
            // },
            // {
            // date: '2025-01-11',
            // // week: '星期五',
            // reservation: '已满'
            // },
          ],
          selectedDate:'', //选择的日期
          selectedDateInfo:null, //选择的日期相关信息
          timeRangeList:[

          ], //接口返回 具体时间范围
          timeSlots: [], // 存储时间段详情数据
          timeArray:[],
        //   staffList:[

        //     {
        //         imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/staff03.png',
        //         staffName:'刘甜甜',
        //         staffInfo:'6年经验',
        //     },
        //     {
        //         imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/staff02.png',
        //         staffName:'王勇',
        //         staffInfo:'6年经验',
        //     },
        //     {
        //         imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/staff01.png',
        //         staffName:'远远',
        //         staffInfo:'7年经验',
        //     },
        //     {
        //         imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/staff02.png',
        //         staffName:'晨辰',
        //         staffInfo:'8年经验',
        //     },
        //     {
        //         imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/staff01.png',
        //         staffName:'张张',
        //         staffInfo:'10年经验',
        //     },
        //   ],
          preBookedShow:false,
          showTips:false,
          currentTimeRange: '08:00~11:59', // 当前选中的时段
          selectedTime: '', // 当前选中的具体时间
          selectedStaffId: '', // 当前选中的服务人员名称
          selectedStaffInfo:'', // 当前选中的服务人员信息
          staffRadio:true,
          servicePersons: [
              {
                  adminStatus: "enable",
                  age: 45,
                  avatarUrl: "https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/operation-platform/45c284f4-6a31-4a98-a2a5-d0db58dd8ee8.jpg",
                  contactPhone: "18059099219",
                  createTime: "2025-03-27T15:35:56.000+08:00",
                  delFlag: false,
                  id: 1,
                  idCard: "1",
                  lastUpdateTime: "2025-04-01T16:49:12.000+08:00",
                  name: "张三",
                  providerId: 2,
                  sex: "male",
                  status: "Active",
                  versionNo: 1,
              },
              {
                  adminStatus: "enable",
                  age: 45,
                  avatarUrl: "https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/operation-platform/45c284f4-6a31-4a98-a2a5-d0db58dd8ee8.jpg",
                  contactPhone: "18059099219",
                  createTime: "2025-03-27T15:35:56.000+08:00",
                  delFlag: false,
                  id: 1,
                  idCard: "1",
                  lastUpdateTime: "2025-04-01T16:49:12.000+08:00",
                  name: "张三",
                  providerId: 2,
                  sex: "male",
                  status: "Active",
                  versionNo: 1,
              },
          ],
          reservationId:'1', //服务id
          versionNo:'',//**锁 */
          latitude: 23.099994, // 纬度
          longitude: 113.324520, // 经度
          reservationInfo:{}, //预约信息
          hasStaff:false, //是否选择服务人员
          selectType:'system', //选择服务人员类型  system 系统推荐  staff 选择服务人员
          isSubmitting: false,
          submitTimer: null,
      }
  },
    onLoad(data) {
        if (data && data.params) {
            this.params = JSON.parse(decodeURIComponent(data.params))
            console.log(this.params)
            this.reservationId = this.params.reservationId
        }
        // this.getReservationInfo()
        // this.getUserAddress()
    },
    onReady() {
        // this.generateTimeList();
        // this.generateTimeArray()
    },
    onShow() {
        this.getReservationInfo()
        this.getUserAddress()
    },
    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft() {
            uni.navigateBack()
        },
        //预约时间  自动生成的
        generateTimeList() {
            const today = new Date();
            const halfMonthLater = new Date(today);
            halfMonthLater.setDate(today.getDate() + 15);
            const dateFormat = (date) => {
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                return `${month}-${day}`;
            };
            const weekFormat = (date) => {
                const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                return weekArr[date.getDay()];
            };
            const currentDate = new Date(today);
            while (currentDate <= halfMonthLater) {
                const dateStr = dateFormat(currentDate);
                const weekStr = weekFormat(currentDate);
                const reservation = Math.random() > 0.5 ? '可约' : '已满';
                this.dateList.push({
                    date: dateStr,
                    week: weekStr,
                    reservation: reservation
                });
                currentDate.setDate(currentDate.getDate() + 1);
            }
        },

        // 已有的星期格式化方法
        weekFormat(date) {
            const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            return weekArr[date.getDay()];
        },

        // 选择预约时间
        selectDate(val, time) {
            console.log(val, time)
            if (time.reservation == '已满') {
                Toast('很抱歉，当前时间段已约满！')
                return false
            }
            this.swiperDateCurrent = val
            this.selectedDate = time.date
            this.selectedDateInfo = time
            this.getSelectedTimeList(time.date,this.latitude,this.longitude)
            this.selectedStaffId = null //重置服务人员信息
            this.hasStaff = false //重置是否选择服务人员
            this.selectedStaffInfo = '' 
            this.selectedTime = null //重置具体时间
            // this.tabsCurrent = `tabNum${val+1}`
        },

        /**
         * 选择具体预约时间
         * */
        // selectTime(val){
        //     // 先清空之前选中的时间
        //     this.selectedTimeIndexes = [];
        //     this.activeTime=val
        // },
        // 假数据  具体时间
        // generateTimeArray() {
        //     const startHour = 8;
        //     const endHour = 21;
        //     for (let hour = startHour; hour <= endHour; hour++) {
        //         const timeStr = `${hour < 10 ? '0' + hour : hour}:00`;
        //         this.timeArray.push(timeStr);
        //     }
        //     console.log(this.timeArray, 'timeArray')
        // },
        // selectTime(val) {
        //     // 先清空之前选中的时间
        //     this.selectedTimeIndexes = [];

        //     // 检查是否能选择指定时长的连续时间段
        //     if (val + this.timeRange - 1 < this.timeArray.length) {
        //         let isConsecutive = true;
        //         for (let i = 1; i < this.timeRange; i++) {
        //             if (
        //                 parseInt(this.timeArray[val + i].split(':')[0]) !==
        //                 parseInt(this.timeArray[val].split(':')[0]) + i
        //             ) {
        //                 isConsecutive = false;
        //                 break;
        //             }
        //         }
        //         if (isConsecutive) {
        //             // 若连续，则选中该时间段
        //             this.selectedTimeIndexes = Array.from({ length: this.timeRange }, (_, i) => val + i);
        //             return;
        //         }
        //     } else {
        //         Toast('因服务时长，当前时间不可预约~')
        //         return false
        //     }
        //     // 若无法选择指定时长的连续时间段，只选择当前时间
        //     this.selectedTimeIndexes = [val];
        // },

        // isTimeSelected(index) {
        //     return this.selectedTimeIndexes.includes(index);
        // },

        // 下拉选择框
        changeAddress(val) {
            this.house = val
            // this.showaddressName = true
            this.myHouse = true
        },
        // 关闭房屋弹窗 
        closeMyHouse(id) {
            console.log('关闭 关闭关闭-------1111')
            this.myHouse = false
            if(id){
                const targetAddress = this.addressDataList.find(item => item.id === id) 
                if(targetAddress) {
                    this.addressInfo = targetAddress;
                    const addressParts = [
                        targetAddress.provinceName,
                        targetAddress.cityName,
                        targetAddress.districtName
                    ].filter(Boolean);
                    this.addressName = `${addressParts.join('')}${targetAddress.detail || ''}`.trim();
                    this.wxUserBaseInfo = targetAddress;
                    // 更新经纬度信息
                    this.latitude = targetAddress.latitude;
                    this.longitude = targetAddress.longitude;
                    this.getDateList(targetAddress.latitude, targetAddress.longitude);
                }
                // 清空
                this.selectedDate = null
                this.selectedDateInfo = {}
                this.swiperDateCurrent = -1
                this.selectedStaffId = null //重置服务人员信息
                this.hasStaff = false //重置是否选择服务人员
                this.selectedStaffInfo = '' 
                this.selectedTime = null //重置具体时间
            }
        },

        // 去添加地址
        toAddAddress() {
            uni.navigateTo({
                url: '/pages/address/addAddress'
            })
        },

        // 切换时间范围
        changeTimeRange(range) {
            this.currentTimeRange = range;
            // this.selectedTime = '';
            const [start, end] = range.split('~');
            const timeRange = this.timeRangeList.find(r =>
                r.start === start && r.end === end
            );
            this.timeSlots = timeRange?.timeList || [];
            this.selectedTime = '';
        },
        // // 获取对应时间范围的时间列表
        // getTimeList(range) {
        //     if (range === '08:00~11:59') {
        //         return ['08:00', '09:00', '10:00', '11:00'];
        //     } else if (range === '12:00~17:59') {
        //         return ['12:00', '13:00', '14:00', '15:00', '16:00', '17:00'];
        //     } else {
        //         return ['18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
        //     }
        // },
        // // 选择具体时间
        toselectTime(time) {
            console.log(time)
            this.selectedTime = time;
            this.selectedStaffId = null
            this.hasStaff = false
            this.getEmpList()
        },
        // 选择服务人员
        onChangeServiceStaff(e){
            console.log(e)
            const selectedId = e.detail
            // 添加空值保护
            if (!selectedId) return;
            // 使用安全查找
            const person = this.servicePersons.find(p => p?.id === selectedId);
            if (person) {
                this.selectedStaffId = person.id;
                this.selectedStaffInfo = person;
                this.hasStaff = true
            } else {
                console.warn('未找到对应服务人员');
                this.selectedStaffId = '';
                this.selectedStaffInfo = null;
                this.hasStaff = false
            }
        },
        // // 选择服务人员
        // toSelectStaff(id, val) {
        //     this.swiperStaffCurrent = val
        // },
        // // 
        // selectPerson(name) {
        //     this.selectedStaffId = name;
        //     // 可以在这里添加选择服务人员后的其他逻辑，比如发送请求到后端
        //     console.log(`选择了服务人员: ${name}`);
        // },
        
        // 服务人员信息
        toStaffInfo(id, val) {
            this.swiperStaffCurrent = val
            uni.navigateTo({
                url: `/pages/myService/serviceStaffInfo?id=${id}&reservationId=${this.reservationId}`
            })
        },


        // 提交预约
        submitPreBooked() {
            if (this.swiperDateCurrent === -1 || !this.selectedDate) {
                Toast('请选择日期')
                return false
            }
            if( ! this.selectedTime ){
                Toast('请选择具体时间')
                return false
            }
            this.reservationInfo={
                versionNo:this.versionNo,
                reservationId:this.reservationId,
                orderDateInfo:this.selectedDateInfo,
                orderTime:this.selectedTime,
                empId:this.selectedStaffId || undefined,
                selectedStaffInfo:this.selectedStaffInfo || {},
                userInfo:this.wxUserBaseInfo,
                addressInfo:this.addressInfo,
            }
            if (!this.selectedStaffId) {
                this.hasStaff =  false
                this.showTips = true
                // this.selectType = 'system' //默认选择系统推荐
                return false
            }
            this.hasStaff =  true
            this.preBookedShow=true
            // this.selectType ='self' //用户自己选择服务人员
        },

        // 关闭预约
        closePreBookedPopup(i) {
            this.showTips = false
            if (i) {
                this.preBookedShow = true
                return false
            }
            this.preBookedShow = false
            // !i 是已经确认预约  跳转至其他状态页面
            // if(!i){
            //     uni.redirectTo({
            //         url: '/pages/myService/otherStatusService'
            //     })
            // }
        },

        // 获取预约信息
        getReservationInfo() {
            reservationInfoApi({ reservationId: this.reservationId }).then(res => {
                console.log(res, '预约信息')
                if (res.code == 200) {
                    this.serviceProducts = res.data
                    this.versionNo = res.data.versionNo
                }
            })
        },
        // 获取接口
        getUserAddress() {
            getUserAddressApi().then(res => {
                console.log(res, '获取用户地址')
                if (res.code == 200) {
                    this.addressDataList = res.data || []
                    const defaultAddress = this.addressDataList.find(item => item.isDefault) || this.addressDataList[0];
                    // const defaultAddress = this.addressDataList[2];
                    if (defaultAddress) {
                        this.addressInfo = defaultAddress
                        // 更清晰的地址拼接逻辑
                        const addressParts = [
                            defaultAddress.provinceName,
                            defaultAddress.cityName,
                            defaultAddress.districtName
                        ].filter(Boolean);
                        this.addressName = `${addressParts.join('')}${defaultAddress.detail || ''}`.trim();
                        // this.addressName = `${addressParts.join(' ')}${addressParts.length ? '' : ''}${defaultAddress.detail || ''}`.trim(); //保持trim()防止首尾空格
                        this.wxUserBaseInfo = defaultAddress
                    }
                    console.log(this.addressDataList,'ss',this.addressDataList.length)
                    if (this.addressDataList.length > 0 && defaultAddress) {
                        this.latitude = defaultAddress.latitude
                        this.longitude = defaultAddress.longitude
                        this.getDateList(defaultAddress.latitude, defaultAddress.longitude)
                    }

                }
            })
        },

        // 获取日期列表
        getDateList(latitude, longitude) {
            queryDateListApi({ reservationId: this.reservationId, lat: latitude, lng: longitude }).then(res => {
                console.log(res, '日期列表')
                if (res.code == 200) {
                    this.dateList = (res.data || []).map(item => {
                        const [_, month, day] = item.date.split('-'); // 分解日期
                        // 转换预约状态
                        const statusMap = {
                            can: '可约',
                            not: '不可约',
                            busy:'已满'
                        };
                        console.log(item.canReserve, 'item.canReserve',item)
                        return {
                            ...item,
                            showDate: `${month}-${day}`,
                            reservation: statusMap[item.canReserve], // 添加默认状态
                            week: {
                                'MONDAY': '星期一',
                                'TUESDAY': '星期二',
                                'WEDNESDAY': '星期三',
                                'THURSDAY': '星期四',
                                'FRIDAY': '星期五',
                                'SATURDAY': '星期六',
                                'SUNDAY': '星期日'
                            }[item.dayOfWeek] || '未知'
                        };
                    });
                    // 初始化选中的日期
                }
            })
        },

        // 获取时间列表
        getSelectedTimeList(date,latitude, longitude) {
            queryTimeListApi({ reservationId: this.reservationId, orderDate:date, lat: latitude, lng: longitude}).then(res => {
                console.log(res, '时间列表')
                if (res.code == 200) {
                    this.timeRangeList = res.data.map(range => ({
                        start: range.startTime.slice(0, 5),  // 取前5位 "08:00"
                        end: range.endTime.slice(0, 5),      // 取前5位 "11:59"
                        timeList: range.timeList
                    }));
                    // 初始化第一个时间段
                    if (this.timeRangeList.length > 0) {
                        this.currentTimeRange = `${this.timeRangeList[0].start}~${this.timeRangeList[0].end}`;
                        this.timeSlots = this.timeRangeList[0].timeList;
                    }
                }
            })
        },

        // 获取服务人员列表
        getEmpList() {
            queryEmpListApi({ reservationId: this.reservationId, orderDate:this.selectedDate, orderTime:this.selectedTime,lat: this.latitude, lng: this.longitude}).then(res => {
                console.log(res, '服务人员列表')
                if (res.code == 200) {
                    this.servicePersons = res.data || []
                }
            })
        },


    }
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #ffffff;
  display: flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
  box-sizing: border-box;
}
.scroll-content {
  flex: 1;
  height: 1px;
}
.scroll_wrapper{
  padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
}
.moneyBg{
  margin-top: 17px;
  margin-left: 24px;
  margin-right: 24px;
  display: flex;
  align-items: center;
}
.text{
  font-size: 30px;
  text-align: center;
  color: #111111;
  line-height: 30px;
}
.money{
  font-size: 20px;
  color: #111111;
  text-align: center;
  line-height: 20px;
  margin-left:19px;
}


.refundDetail{
  padding: 42px 24px 24px 24px ;
}
.box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #111111;
  font-size: 14px;
  line-height: 14px;
}

.orderList {
    padding-top: 40rpx;
    margin: 0rpx 48rpx;
    background-color: #ffffff;
    width: calc(100% - 96rpx);
    // border-bottom: 1px solid #F0F0F0;

    // 待付款
    .orderTop {
        display: flex;
        align-items: center;
    }

    .orderTopRight {
        width: 100%;
    }

    .listTop {
        display: flex;
        align-items: center;

        .listTopLeft {
            width: 147rpx;

            img {
                width: 100%;
                height: auto;
            }
        }

        .listTopRight {
            color: #FF6203;
            text-align: right;
            line-height: 26rpx;
            font-size: 26rpx;
        }
    }

    .goodsDetail {
        margin-top: 20rpx;
        width: 100%;

        .wraper_left {
            display: flex;
            width: 100%;
            margin-bottom: 11px;
        }

        .wraper_left:last-child {
            margin-bottom: 0px;
        }

        // .wraper_right {
        //     float: right;
        // }

        .goodsPic {
            width: 33%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
                width: 100%;
                height: auto;
            }
        }

        .goods_tips {
            margin-top: 6px;
            font-size: 22rpx;
            text-align: left;
            color: #888888;
            line-height: 22rpx;
        }

        .goodsText {
            width: 67%;
            margin-left: 14px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-top: 12rpx;
            padding-bottom: 20rpx;
            text-align: left;

            .goodsTop {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .goods_T {
                    max-width: 80%;
                    font-size: 28rpx;
                    text-align: left;
                    color: #111111;
                    line-height: 28rpx;
                    // margin-top: 9px;  //display：flex   中 元素居中
                    white-space: nowrap;
                    /* 防止文本换行 */
                    overflow: hidden;
                    /* 超出部分隐藏 */
                    text-overflow: ellipsis;
                    /* 显示省略号 */
                }

            }

            .goodsMiddle {
                margin-top: 26rpx;
                width: 100%;
                font-size: 22rpx;
                text-align: left;
                color: #666666;
                line-height: 22rpx;

                span {
                    margin-left: 20rpx;
                }
            }

            .goodsBottom {
                margin-top: 25rpx;
                display: flex;
                align-items: center;
                width: 100%;
                font-size: 22rpx;
                text-align: left;
                color: #666666;

                span {
                    margin-left: 20rpx;
                    font-size: 22rpx;
                    text-align: left;
                    color: #111111;
                    line-height: 22rpx;
                }
            }
        }
    }
}
.clearfix{
    margin-top: 24rpx;
}
// 空地址
.emptyAddress{
    margin-top: 36rpx;
    margin-left: 48rpx;
    margin-right: 48rpx;

    .userAddressEmpty{
        margin-top: 80rpx;
        .description{
            margin-top: 20rpx;
            color: #333333;
            font-size: 32rpx;
            text-align: center;
            line-height: 32rpx;
        }
    }
}
.userInfo {
    margin-top: 36rpx;
    margin-left: 48rpx;
    margin-right: 48rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 36rpx;
    border-bottom: 2rpx solid #f0f0f0;

    .userInfo_left {
        //左边用户信息
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 80%;
    }

    .user_address {
        //住址
        font-size: 26rpx;
        text-align: left;
        color: #111111;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .user_address_text {
        max-width: 90%;
        white-space: nowrap;
        /* 防止文本换行 */
        overflow: hidden;
        /* 超出部分隐藏 */
        text-overflow: ellipsis;
        /* 显示省略号 */
    }

    .userInfo_bottom {
        font-size: 28rpx;
        text-align: left;
        color: #737373;
        line-height: 28rpx;
        margin-top: 22rpx;
    }

    .userInfo_right {
        float: right;
        text-align: right;
    }


}
 
// .serviceStatus {
//   padding-top: 55rpx;
//   margin: 0rpx 48rpx;
//     .serviceStatusTop {
//         display: flex;
//         justify-content: space-between;
//         align-items: center;

//         .serviceStatusTitle {
//             font-size: 36rpx;
//             line-height: 36rpx;
//             text-align: left;
//             color: #111111;
//         }

//         .act_more {
//             line-height: 24rpx;
//             vertical-align: middle;
//             height: 24rpx;
//             font-size: 24rpx;
//             text-align: right;
//             color: #666666;

//             .act_t {
//                 color: #888888;
//                 font-size: 20rpx;
//                 margin-right: 10rpx;
//             }

//             .act_Im {
//                 vertical-align: -2rpx;
//             }
//         }
//     }
//     .serviceStatusSteps{
//       padding-top: 60rpx;
//       padding-bottom: 77rpx;
//     }
// }
// 选择预约日期
.preBookedDate {
    margin-top: 55rpx;
    padding: 0rpx 48rpx;

    .preBookedDateTitle {
        font-size: 36rpx;
        text-align: left;
        color: #111111;
        line-height: 36rpx;
        font-weight: bolder;
    }

    .preBookedDateContent {
        margin-top: 52rpx;
        // padding-bottom: 49rpx;

        .preBookedDatLabel {
            font-size: 28rpx;
            line-height: 28rpx;
            text-align: left;
            color: #888888;
            margin-bottom: 38rpx;

            span {
                font-size: 28rpx;
                text-align: left;
                color: #111111;
                line-height: 28rpx;
            }
        }
    }

    .time-carousel-container {
        width: 100%;
        overflow: hidden;
    }

    .scroll-view {
        white-space: nowrap;
    }

    .date-card {
        padding: 25rpx 12rpx;
        border-radius: 12px;
        background: #f7f7f7;
        display: inline-block;
        width: 116rpx;
        margin-right: 18rpx;
        text-align: center;
        &.active {
            background: #FF6203;
            color: #ffffff;
    
            .date,.week,.reservation{
                color: #ffffff;
            }

           .not,.full{
                color: #ffffff;
                background: #f7f7f7;
            }
    
        }
        &.disabled{
            // opacity: 0.5;
            pointer-events: none; // 禁用点击事件
            background: #f7f7f7;

            .date,.week,.reservation{
                color: #888888;
            }
            .not,.full{
                color: #888888 ;
                // background: #f7f7f7;
            }
        }
    }

    .date {
        font-size: 30rpx;
        color: #111111;
        font-weight: bolder;
    }

    .week {
        font-size: 28rpx;
        color: #111111;
        margin-top:26rpx ;
    }

    .reservation {
        font-size: 28rpx;
        line-height: 28rpx;
        margin-top: 12rpx;
        font-weight: bolder;
        color: #FF6203;
    }
    .not{
        color:#888888;
    }
    .full{
        color:#888888;
    }
}
// 选择具体服务时间
.preBookedTime {
    margin-top: 88rpx;
    padding: 0rpx 48rpx;
    border-bottom: 2rpx solid #f0f0f0;

    .preBookedTimeTitle {
        display: flex;
        align-items: center;
        font-size: 36rpx;
        text-align: left;
        color: #111111;
        line-height: 36rpx;
        font-weight: bolder;

        // span{
        //     font-weight: 400;
        //     font-size: 24rpx;
        //     text-align: left;
        //     color: #888888;
        //     line-height: 24rpx;
        //     margin-left: 22rpx;
        // }
    }

    .preBookedTimeContent {
        margin-top: 50rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        //  .time-card{
        //     width: 21%;
        //     // border: 1px solid #D4D4D4;
        //     margin-right: 16rpx;
        //     padding: 18rpx auto;
        //     font-size: 28rpx;
        //     text-align: center;
        //     color: #111111;
        //     margin-bottom:20rpx; 
        //     background-color: #f9f9f9;
        //     &.active {
        //         background: #FF6203;
        //         color: #ffffff;
        //         // font-weight: bolder;
        //         // border: 1px solid #111111;
        //         border: none;

        //         .date,.week,.reservation{
        //             color: #ffffff;
        //         }

        //     }
        // }
        // .disabled-time-card{
        //     border: 1px solid #D4D4D4;
        //     color: #D4D4D4;
        // }


        .time-range {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20rpx;
            width: 100%;
        }

        .time-range .time-range-item {
            color: #333;
            font-size: 30rpx;

            &.active {
                color: #FF6203;
            }
        }

        .time-range .time-range-line {
            height: 40rpx;
            width: 2rpx;
            background-color: #e6e6e6;
            color: #e6e6e6;
        }

        .time-list {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 30rpx;
            width: 100%;
        }

        .time-list .time-card {
            background: #f8f8f8;
            border-radius: 5rpx;
            margin-bottom: 10rpx;
            font-size: 32rpx;
            text-align: center;
            color: #999999;
            height: 60rpx;
            line-height: 60rpx;
            width: 20%;
            margin-right: 14rpx;

            &.active {
                background-color: #FF6203;
                color: white;
            }

            &.disabled {
                opacity: 0.5;
                pointer-events: none;
            }
        }

    }
    }
// 服务人员
.serviceStaff{
    margin-top: 88rpx;

  .serviceStaffInfoTitle{
        padding:0rpx 48rpx;
        display: flex;
        align-items: center;
        font-size: 36rpx;
        text-align: left;
        color: #111111;
        line-height: 36rpx;
        font-weight: bolder;

        span{
            font-weight: 400;
            font-size: 24rpx;
            text-align: left;
            color: #888888;
            line-height: 24rpx;
            margin-left: 22rpx;
        }
  }
  .serviceStaffInfoContent{
      padding-top: 50rpx;
      padding-bottom: 62rpx;
      display: flex;
      padding-left: 48rpx;

    .scroll-view-staff {
        display: flex;
        white-space: nowrap;
        width: 100%;
    }

    .serviceStaffItem {
        flex: 1;
        display: inline-block;
        width: 134rpx;
        margin-right: 26rpx;

        .staffImg {
            width: 133rpx;
            height: 133rpx;
            line-height: 133rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;

            img {
                width: 100%;
                height: auto;
            }
        }

        .staffName {
            font-size: 26rpx;
            line-height: 26rpx;
            text-align: center;
            color: #111111;
            margin-top: 24rpx;
            font-weight: bolder;
        }

        .staffInfo {
            margin-top: 12rpx;
            font-size: 24rpx;
            text-align: center;
            color: #111111;
            line-height: 24rpx;
        }
        &.active{

            .staffName,.staffInfo{
                color:#FF6203;
            }
        }
    }


  }
  .service-personnel {
      margin-bottom: 20rpx;
      padding: 0rpx 48rpx;

      .personnel-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10rpx 0;
          margin-top: 34rpx;
          width: 100%;
          height: 112rpx;
      }

      .personnel-item-left {
          display: flex;
          align-items: center;
          width: 85%;
          height: 100%;

          img {
              width: 112rpx;
              height: 112rpx;
              border-radius: 50%;
              margin-right: 24rpx;
          }
      }

      .person-info {
          width: 100%;
      }

      .person-desc {
          display: flex;
          align-items: center;
      }

      .name {
          font-size: 32rpx;
          color: #333;
      }

      .experience {
          margin-left: 16rpx;
          font-size: 24rpx;
          color: #999;
      }

      .tags {
          display: flex;
          flex-wrap: wrap;
          margin-top: 10rpx;
        //   height: 40rpx;
      }

      .tag {
          height: 40rpx;
        //   border-radius: 4rpx;
          background: #fff4ed;
          border: 1rpx solid #ff6202;
          font-size: 20rpx;
          text-align: center;
          color: #ff6203;
          margin-right: 16rpx;
          margin-bottom: 10rpx;
          padding: 0rpx 10rpx;
          line-height: 40rpx;
      }
  }
}

/* Vant单选框样式调整，可根据实际需求修改 */
::v-deep.van-radio__input--checked.van-radio__icon {
    border-color: #FF6203;
    background-color: #FF6203;
}


::v-deep .van-nav-bar__left {
  width: 56px;
  height: 44px;
}

::v-deep #navBarS .van-icon {
  color: #242629 !important;
}
::v-deep .van-cell{
  padding-left: 0px !important;
  border-bottom: 1px solid #f9f9f9;
}

::v-deep #my-goods-action .van-goods-action, .van-goods-action--safe{
    border-top: 1px solid #f9f9f9 !important;
}
::v-deep .van-empty{
    padding: 0rpx;
}
::v-deep .van-empty__image {
    width: 200rpx;
    height: 200rpx;
}
.t16{
  margin-top: 16px;
}
::v-deep .van-button--primary {
  width: 100%;
  height: 86rpx;
  border-radius: 50rpx;
  background: #ff6203;
  margin-top: 32rpx;
  font-size: 28rpx;
}
.disabled-btn {
    // background-color: #cccccc !important;
    border-color: #cccccc !important;
}
</style>
